<template>
  <div class="app-container">
    <div class="T flexBetween">
      <div class="sousuo">
        <el-input v-model="searchValue" :placeholder="$t('licence.cus_searchValue')" style="margin-right: 20px; width: 400px"></el-input>
        <el-button @click="getTerminalList" type="primary" style="margin: 20px 0">{{ $t('licence.fau_Thequery') }}</el-button>
      </div>
      <div class="export" @click="Export">{{ $t('licence.sta_export') }}</div>
    </div>

    <el-table :data="selectionList" :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
      <el-table-column property="userName" :label="$t('licence.cus_userName')"></el-table-column>
      <el-table-column property="nickName" :label="$t('licence.cus_nickName')"></el-table-column>
      <el-table-column property="phone" :label="$t('licence.dep_phone')"></el-table-column>
      <el-table-column property="email" :label="$t('licence.use_email')"></el-table-column>
      <el-table-column property="registerType" :label="$t('licence.cus_register')">
        <template #default="scope">
          <p v-if="scope.row.registerType == 1">{{ $t('licence.cus_register1') }}</p>
          <p v-if="scope.row.registerType == 2">{{ $t('licence.cus_register2') }}</p>
        </template>
        <!--  -->
      </el-table-column>
      <el-table-column property="createTime" :label="$t('licence.cus_createTime')">
        <template #default="scope">
          {{ format.FormatDate(scope.row.createTime) }}
        </template>
        <!--  -->
      </el-table-column>
    </el-table>
    <!-- 分页区 -->
    <div class="block" style="margin: 20px">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="queryData.page" :page-size.sync="queryData.pagesize" :page-sizes="[2, 4, 6, 8, 10]" layout="sizes, prev, pager, next,total, jumper" :total="queryData.total"> </el-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
import format from '@/utils/format'
import { getTerminalLists} from '@/api/powerStation/powerStation';
import { getCustomerExport } from '@/api/statisticalData/InverterStatistics'; //客户管理导出接口
import { onMounted, reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

      const selectionList = ref([]) //用户列表
      // 分页
      const queryData = reactive({
        page: 1, // 当前页码
        pagesize: 10,
        total: 0, // 总数
      })
      const searchValue = ref('') //搜索用户参数
      const lang = ref(0)

  onMounted(()=>{
    {
    // 获取语言
    if (localStorage.getItem('locale') == 'en_US') {
      lang.value = 1;
    } else {
      lang.value = 0;
    }
    // 获取用户信息
    getTerminalList();
  }
  })
    //选择用户弹框 获取用户列表
    const getTerminalList = async () => {
      let res = await getTerminalLists({
        pageNum: queryData.page,
        pageSize: queryData.pagesize,
        searchValue: searchValue.value,
      });
      queryData.total = res.data.total;
      selectionList.value = res.data.list;
    }
    // 分页
    const handleSizeChange = (val) => {
      queryData.pagesize = val;
      getTerminalList();
    }
    const handleCurrentChange = (val) => {
      queryData.page = val;
      getTerminalList();
    }
    //客户端数据导出
    const Export = async () => {
      const res = await getCustomerExport({
        searchValue: searchValue.value,
        lang: lang.value,
      });
      let url = window.URL.createObjectURL(new Blob([res], { type: 'application/vnd.ms-excel' }));
      let link = document.createElement('a');
      link.style.display = 'none';
      link.href = url;
      link.setAttribute('download', t('licence.cus_tongji') + '.xls');
      document.body.appendChild(link);
      link.click();
    }
</script>
<style lang="scss" scoped>
.T {
  // 查询按钮
  .el-button--primary {
    color: #ffffff;
    background-color: #305add;
    border-color: #305add;
  }
  // 导出按钮
  .export {
    width: 70px;
    height: 36px;
    border-radius: 4px;
    border: 1px solid #dddfe6;
    font-size: 14px;
    text-align: center;
    line-height: 36px;
    cursor: pointer;
  }
}
// 弹框里的分页
.block {
  // display: flex;
  display: -webkit-box;
  justify-content: end;
}
</style>
